<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">

        // 纯数字文本框
        class NumberInput extends React.Component {
            state = {
                val: ""
            }
            onChange(e) {
                let val = e.target.value
                if (val == '.') val = ''
                val = val.replace(/\D/g, $ => {
                    return $ != '.' ? '' : '.'
                })
                this.setState({ val })
            }
            render() {
                return (
                    <input type="text" value={this.state.val} onChange={this.onChange.bind(this)} />
                )
            }
        }

        class FromTest extends React.Component {
            state = {
                account: "",
                pwd: '',
                sex: 'male',
                chooseloves: ['1'],
                loves: [
                    { id: '1', value: '足球' },
                    { id: '2', value: '电影' },
                    { id: '3', value: '乒乓球' },
                    { id: '4', value: '其他' }
                ],
                city: "-1",
                citys: [
                    { id: -1, value: '请选择' },
                    { id: 1, value: '北京' },
                    { id: 2, value: '上海' },
                    { id: 3, value: '广州' },
                    { id: 4, value: '深圳' },
                    { id: 5, value: '杭州' },
                ]
            }

            onChange = e => {
                let { value, checked, name, type } = e.target

                if (type === 'checkbox') {
                    value = checked ? this.state[name].concat(value) : this.state[name].filter(l => l.id != value)
                }
                this.setState({
                    [name]: value
                }, () => {
                    console.log(this.state, value, name);
                })
            }
            render() {
                const citys = this.state.citys.map(c => (<option key={c.id} value={c.id} > {c.value}</option>))
                const loves = this.state.loves.map(l => {
                    return (<label key={l.id}>
                        <input type="checkbox" name="chooseloves"
                            value={l.id}
                            checked={this.state.chooseloves.includes(l.id)}
                            onChange={this.onChange} />
                        {l.value}
                    </label>)
                })
                return (
                    <div>
                        <p>
                            账号：
                            <input type="text" name="account" value={this.state.account} onChange={this.onChange} />
                        </p>
                        <p>
                            密码：
                            <input type="password" name="pwd" value={this.state.pwd} onChange={this.onChange} />
                        </p>
                        <p>
                            城市：
                            <select name="city" value={this.state.city} onChange={this.onChange} >
                                {citys}
                            </select>
                        </p>
                        <p>
                            性别：
                            <label><input type="radio" checked={this.state.sex === 'male'} name="sex" value="male" onChange={this.onChange} /> 男</label>
                            <label><input type="radio" checked={this.state.sex === 'female'} name="sex" value="female" onChange={this.onChange} /> 女</label>
                        </p>
                        <p>
                            爱好：
                            {loves}
                        </p>
                    </div>
                )
            }
        }


        class App extends React.Component {
            state = {
                val: "1",
                checked: false
            }
            render() {
                return (
                    <div>
                        {/*input 默认是非受控组件*/}
                        {/*input 设置默认值  defaultValue="gffg" */}
                        {/*input 设置了value属性就变成了受控组件 */}
                        <input type="text" value={this.state.val}
                            onChange={e => this.setState({ val: e.target.value })} />
                        {/*单选和多选框需要设置 checked*/}
                        <input type="checkbox" checked={this.state.checked}
                            onChange={e => this.setState({ checked: e.target.checked })} />
                    </div>
                )
            }
        }

        const html = (
            <div>
                <FromTest />
                {/*<NumberInput />*/}
                {/*<App />*/}
            </div>)
        ReactDOM.render(html, document.getElementById('root'))
    </script>
</body>

</html>